<template>
  <div class="container">
    <div class="app-container">
      <div class="left">
        <!-- 树形控件 -->
        <SeletTree @onTree="changeTree" />
      </div>
      <div class="right">
        <div class="jigou" style="background-color: #fff;">
          <div class="top">
            <h4>机构信息</h4>
          </div>
          <div class="table">
            <el-form :inline="true" label-position="left">
              <div class="row">
                <el-form-item label="机构编号">
                  <el-input v-model="formLabelAlign.id" style="width: 350px;" disabled />
                </el-form-item>
                <el-form-item label="机构名称">
                  <el-input v-model="formLabelAlign.name" style="width: 350px;" disabled />
                </el-form-item>
                <el-form-item label="机构类型">
                  <el-select v-model="formLabelAlign.type" placeholder="请选择" disabled style="width: 350px;">
                    <el-option
                      v-for="item in nameOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select></el-form-item>
              </div>
              <div class="row">
                <el-form-item label="机构地址">
                  <el-select v-model="formLabelAlign.province.id" :disabled="!isEdit" placeholder="请选择省" style="width: 434px;" @change="changeProv">
                    <el-option
                      v-for="item in provinceOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select v-model="formLabelAlign.city.id" :disabled="!isEdit" placeholder="请选择市" style="width: 434px;margin: 0 4px;" @change="changeCity">
                    <el-option
                      v-for="item in cityOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                  <el-select v-model="formLabelAlign.county.id" :disabled="!isEdit||formLabelAlign.city.id===''" placeholder="请选择县/区" style="width: 434px;">
                    <el-option
                      v-for="item in areaOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div class="row">
                <el-form-item label="详细地址">
                  <el-input v-model="formLabelAlign.address" :disabled="!isEdit" style="width: 350px;" />
                </el-form-item>
                <el-form-item label="经度">
                  <el-input v-model="formLabelAlign.longitude" disabled style="width: 350px;">
                    <template #suffix><span class="trapeze">E</span></template>
                  </el-input>
                </el-form-item>
                <el-form-item label="纬度">
                  <el-input v-model="formLabelAlign.latitude" disabled style="width: 350px;">
                    <template #suffix><span class="trapeze">N</span></template>
                  </el-input>
                </el-form-item>
              </div>
              <div class="b">
                <el-form-item label="机构负责人">
                  <el-input v-model="formLabelAlign.managerName" :disabled="!isEdit" style="width: 350px;" />
                </el-form-item>
                <el-form-item label="联系电话" style="margin-left: 29px;">
                  <el-input v-model="formLabelAlign.phone" :disabled="!isEdit" style="width: 350px;" />
                </el-form-item>
              </div>
              <div class="btn">
                <el-button v-if="isEdit" size="mini" style="padding-left: 25px;padding-right: 25px;border-radius: 5px;" type="danger" @click="editBtn">保存</el-button>
                <el-button v-else size="mini" style="padding-left: 25px;padding-right: 25px;border-radius: 5px;" type="danger" @click="isEdit=true">编辑</el-button>
              </div>
            </el-form>

          </div>
        </div>
        <div class="map">
          <div class="top">
            <h4>员工信息</h4>
          </div>
          <div class="table">
            <el-table
              size="small "
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{ background: '#f8faff' }"
            >
              <el-table-column label="序号" type="index" width="100" :index="num" />
              <el-table-column
                label="员工编号"
                width="180"
                prop="userId"
              />
              <el-table-column
                label="员工姓名"
                width="180"
                prop="name"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
              />
              <el-table-column
                label="所属机构"
              >
                <template v-slot="{row}">
                  <span>{{ row.agency.name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="account"
                label="系统账户"
              />
              <el-table-column
                label="系统角色"
                prop="stationName"
              />
              <el-table-column label="账号状态">
                <template v-slot="{row}">
                  <el-button v-if="row.status==1" type="text" size="small"> <span class="par" />正常</el-button>
                  <el-button v-else type="text" size="small"><span class="par" style="background-color: red;" />禁用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="total>5" class="page">
            <el-pagination
              :page-sizes="[5, 10, 20, 40]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { edit, getAreaData, getDetail, getStaffPage } from '@/api/organization'
import SeletTree from './components/seletTree.vue'
export default {
  name: 'Social',
  components: {
    SeletTree
  },
  data() {
    return {
      isEdit: false,
      pageParams: {
        agencyId: '',
        page: '1',
        pageSize: 5
      },
      nameOptions: [
        { value: 1, label: '一级转运' },
        { value: 2, label: '二级转运' },
        { value: 3, label: '网点' }
      ],
      provinceOptions: [],
      cityOptions: [],
      areaOptions: [],

      total: 4,
      formLabelAlign: {
        province: {
          'id': '7362',
          'name': '天津',
          'lng': '117.200983',
          'lat': '39.084158',
          'mutiPoints': null
        },
        city: {
          'id': '7363',
          'name': '天津',
          'lng': '117.200983',
          'lat': '39.084158',
          'mutiPoints': null
        },
        county: {
          'id': '7434',
          'name': '河东',
          'lng': '117.251587',
          'lat': '39.128291',
          'mutiPoints': null
        },
        'parent': null,
        'id': '1024982867475820033',
        'name': '东北转运中心',
        'type': 1,
        'phone': '18633804519',
        'address': '四川成都金牛',
        'latitude': 41.835441,
        'longitude': 123.42944,
        'parentId': '0',
        'managerName': '计算机',
        'extra': null,
        'status': false

      },
      tableData: []
    }
  },
  computed: {
    num() {
      return this.pageParams.page * this.pageParams.pageSize - (this.pageParams.pageSize - 1)
    }
  },
  async created() {
    const res = await getAreaData()
    this.provinceOptions = res.data
  },
  methods: {
    async changeTree(id) {
      this.pageParams.page = 1
      this.isEdit = false
      this.pageParams.agencyId = id
      this.getList()
      const res = await getDetail(id)
      this.formLabelAlign = res.data
      const res1 = await getAreaData(this.formLabelAlign.province.id)
      this.cityOptions = res1.data
      const { data } = await getAreaData(this.formLabelAlign.city.id)
      this.areaOptions = data
    },
    async getList() {
      const res = await getStaffPage(this.pageParams)
      this.total = +res.data.counts
      this.tableData = res.data.items
    },
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageParams.page = val
      this.getList()
    },
    async changeProv(e) {
      this.formLabelAlign.city.id = ''
      this.formLabelAlign.county.id = ''
      const res = await getAreaData(e)
      this.cityOptions = res.data
    },
    async changeCity(e) {
      this.formLabelAlign.county.id = ''
      const res = await getAreaData(e)
      this.areaOptions = res.data
    },
    async editBtn() {
      if (this.formLabelAlign.city.id === '' || this.formLabelAlign.county.id === '') {
        this.$message.error('请输入机构')
        return
      }
      if (this.formLabelAlign.address === '') {
        this.$message.error('请输入详细地址')
        return
      }
      if (this.formLabelAlign.managerName === '') {
        this.$message.error('请输入机构负责人')
        return
      }
      if (this.formLabelAlign.phone === '') {
        this.$message.error('请输入负责人联系电话')
        return
      }
      console.log(this.formLabelAlign)
      this.$message.error('很抱歉，演示数据，不允许修改')
      // this.formLabelAlign.cityId = this.formLabelAlign.city.id
      // delete this.formLabelAlign.city
      // this.formLabelAlign.countyId = this.formLabelAlign.county.id
      // delete this.formLabelAlign.county
      // await edit(this.formLabelAlign)
      // this.changeTree(this.formLabelAlign.id)
      // this.$message.success('编辑机构成功')
    }
  }
}
</script>
  <style scoped>
  .el-button--text{
    color: black;
  }
  .par{
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #28ca80;
    margin-bottom: 2px;
    margin-right: 4px;
  }
  .trapeze{
    color: black;
    margin-right: 15px;
  }
  .page{
    display: flex;
    justify-content: center;
    padding-bottom: 25px;
  }
  .btn{
    display: flex;
    justify-content: center;
  }
  .app-container{
    /* height: 800px; */
    display: flex;
    justify-content: space-between;
    background-color: #f4f6f8;
  }
  .left{
    width: 220px;
    margin-right: 20px;
    padding: 10px;
    background-color: #fff;
  }
  .right{
    flex: 1;
    background-color: #f3f4f7;
  }
  .top{
    height: 60px;
    background-color: #fafafa;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 30px;
  }
  .map{
    margin-top: 20px;
    background-color: #fff;
  }
  .inp{
    height: 80px;
    display: flex;
    align-items: center;
  }
  .app-container{
    /* max-height: 830px; */
  }
.table{
  padding: 20px;
}
.row{
  display: flex;
  justify-content: space-between;
}
.b{
  display: flex;
  justify-content: flex-start;
}
  </style>

